<template>
  <div class="suspended-panel-container">
    <div v-for="(item, i) in list" :key="i">
      <el-badge :value="item.count || ''" type="primary">
        <div class="btn"><i :class="item.class"></i></div>
      </el-badge>
    </div>
    <el-divider></el-divider>
    <div class="btn"><i class="el-icon-warning-outline"></i></div>
    <div class="btn"><i class="el-icon-aim" @click="focus"></i></div>
  </div>
</template>

<script>
export default {
  methods: {
    focus() {
      this.$message.success('专注模式？在写了在写了')
    }
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  }
}
</script>

<style lang="less" scoped>
.suspended-panel-container {
  position: fixed;
  top: 10rem;
  margin-left: -7rem;
  width: 4rem;

  .btn {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--taojin-backgroung-color);
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 4%);
    cursor: pointer;
    margin-bottom: 1.667rem;

    i {
      font-size: 1.5rem;
      cursor: pointer;
    }
  }

  .icon-container {
    width: 100%;
    height: 100%;
  }

  .btn:hover > i {
    color: var(--hover-color);
  }
}

:deep(.el-badge__content) {
  top: 10px;
  right: 12px;
}
</style>
